<template>
	<view class="location-help">
		<nav-bar backUrl="/pages/collaboration/collaboration" :isTabbar="true"></nav-bar>
		<view class="content">
			<view class="description">
				欢迎将您附近正在出租的门面拍给我们，并将该门面所在的地址定位发给我们
			</view>
			<view class="map-section">
				<map class="map" :latitude="latitude" :longitude="longitude" @tap="chooseLocation"></map>
				<view class="map-tip">点击地图选择位置</view>
				<view v-if="address" class="selected-address">
					已选位置: {{address}}
				</view>
			</view>
			<view class="upload-section">
				<view class="upload-title">上传图片/视频</view>
				<view class="upload-content">
					<view class="upload-list">
						<view class="upload-item" v-for="(item, index) in uploadedFiles" :key="index">
							<!-- 根据文件类型显示不同组件 -->
							<image v-if="item.type === 'image'" class="uploaded-image" :src="item.url"
								mode="aspectFill">
							</image>
							<video v-else-if="item.type === 'video'" class="uploaded-video" :src="item.url"
								:controls="false" :show-play-btn="true" :enable-progress-gesture="false"
								object-fit="cover">
							</video>
							<view class="delete-btn" @tap="deleteFile(index)">×</view>
						</view>
						<view class="upload-btn" @tap="chooseImage" v-if="uploadedFiles.length < 9">
							<image src="/static/icons/upload.png" mode="aspectFit"></image>
							<text>上传照片</text>
						</view>
						<view class="upload-btn" @tap="chooseVideo" v-if="!hasVideo">
							<image src="/static/icons/video.png" mode="aspectFit"></image>
							<text>上传视频</text>
						</view>
					</view>
				</view>
			</view>
			<view class="contact-section">
				<view class="contact-text">
					请留下您的联系方式，一经采纳，将有红包或项目奖励
				</view>
				<input type="number" v-model="phone" placeholder="请输入您的手机号码" class="phone-input" maxlength="11" />
				<button class="submit-btn" @tap="submitLocation" :disabled="submitLoading">
					{{submitLoading ? '提交中...' : '提交'}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/nav-bar.vue';
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				hasVideo: false,
				uploadedFiles: [],
				latitude: 39.908823,
				longitude: 116.397470,
				address: '',
				addressName: '',
				phone: '',
				location: null,
				submitLoading: false,
				imageList: []
			}
		},
		methods: {
			async chooseVideo() {
				try {
					// 选择视频
					const res = await uni.chooseVideo({
						compressed: true,
						sourceType: ['camera', 'album']
					})
					// 显示上传中提示
					uni.showLoading({
						title: '上传中...',
						mask: true
					})
					// 上传视频文件
					const uploadRes = await uni.uploadFile({
						url: `${uni.$config.baseUrl}/minio/upload/video`,
						filePath: res.tempFilePath,
						name: 'file',
						formData: {}
					})
					const data = JSON.parse(uploadRes.data)
					if (data.code === 200) {
						// 上传成功，添加到文件列表
						this.uploadedFiles.push({
							type: 'video',
							url: data.url // 使用返回的视频URL
						})
						this.hasVideo = true
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					} else {
						throw new Error(data.msg || '上传失败')
					}
				} catch (err) {
					uni.showToast({
						title: err.message || '上传失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			deleteFile(index) {
				const file = this.uploadedFiles[index]
				if (file.type === 'video') {
					this.hasVideo = false
				}
				this.uploadedFiles.splice(index, 1)
			},
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.uploadedFiles.length,
					success: (res) => {
						const newFiles = res.tempFilePaths.map(path => ({
							type: 'image',
							url: path
						}))
						this.uploadedFiles.push(...newFiles)
					}
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.address = res.address
						this.addressName = res.name
						this.location = res
					},
					fail: (err) => {
						uni.showToast({
							title: '选择位置失败',
							icon: 'none'
						})
					}
				})
			},
			async submitLocation() {
				if (!this.location) {
					uni.showToast({
						title: '请先选择位置',
						icon: 'none'
					})
					return
				}
				if (!this.phone || !/^1\d{10}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				this.submitLoading = true
				try {
					// 构建请求数据
					const locationRecommendation = {
						imageUrl: this.uploadedFiles.map(file => file.url).join(','),
						phone: this.phone,
						latitude: this.latitude,
						longitude: this.longitude,
						address: this.address,
						addressName: this.addressName,
						status: 0, // 待处理状态
						rewardStatus: 0, // 默认未发放
					}
					// 获取token
					const token = uni.getStorageSync('token')
					uni.request({
						url: `${uni.$config.baseUrl}/locationRecommendation`,
						method: 'POST',
						header: {
							'Authorization': 'Bearer ' + token,
							'Content-Type': 'application/json'
						},
						data: locationRecommendation,
						success: (res) => {
							if (res.data.code === 200) {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								// 重置表单
								setTimeout(() => {
									this.resetForm()
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 1500)
							} else {
								uni.showToast({
									title: res.data.msg || '提交失败',
									icon: 'none'
								})
							}
						},
						fail: (err) => {
							uni.showToast({
								title: '网络异常，请稍后重试',
								icon: 'none'
							})
						},
						complete: () => {
							this.submitLoading = false
						}
					})
				} catch (error) {
					uni.showToast({
						title: '图片处理失败，请重试',
						icon: 'none'
					})
					this.submitLoading = false
				}
			},
			resetForm() {
				this.phone = ''
				this.address = ''
				this.addressName = ''
				this.location = null
			}
		}
	}
</script>

<style lang="scss">
	.upload-section {
		background: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.upload-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.upload-content {
			.upload-list {
				display: flex;
				flex-wrap: wrap;

				.upload-item {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					position: relative;
					overflow: hidden; // 添加overflow防止视频超出容器

					.uploaded-image,
					.uploaded-video {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

					.uploaded-video {
						object-fit: cover;
					}

					.delete-btn {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						width: 40rpx;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
					}
				}

				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					margin-bottom: 20rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	.location-help {
		min-height: 100vh;
		background: linear-gradient(135deg, #FFF8E8 0%, #FFE4C6 100%);
		padding: 30rpx;

		.content {
			background: rgba(255, 255, 255, 0.9);
			border-radius: 24rpx;
			padding: 40rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

			.description {
				font-size: 28rpx;
				color: #2B87FF;
				line-height: 1.6;
				margin-bottom: 30rpx;
				text-align: left;
			}

			.map-section {
				margin-bottom: 40rpx;

				.map {
					width: 100%;
					height: 400rpx;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
				}

				.map-tip {
					text-align: center;
					color: #666;
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}

				.selected-address {
					padding: 20rpx;
					background-color: #F8F9FA;
					border-radius: 12rpx;
					font-size: 26rpx;
					color: #333;
					line-height: 1.4;
					margin-top: 10rpx;
					word-break: break-all;
				}
			}

			.contact-section {
				.contact-text {
					font-size: 28rpx;
					color: #2B87FF;
					margin-bottom: 30rpx;
					line-height: 1.6;
					text-align: left;
				}

				.phone-input {
					width: 100%;
					height: 88rpx;
					background: #FFFFFF;
					border: 2rpx solid #E5E5E5;
					border-radius: 44rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
					margin-bottom: 40rpx;
					box-sizing: border-box;
				}

				.submit-btn {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(135deg, #2B87FF 0%, #3C77FF 100%);
					border-radius: 44rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: none;

					&:active {
						opacity: 0.9;
					}

					&[disabled] {
						background: #CCCCCC;
						opacity: 0.7;
					}
				}
			}
		}
	}
</style>